import { PageContainer, ProCard } from '@ant-design/pro-components';
import { useTeachers, useDeleteTeacher } from '@/services/teacher';
import { useEffect, useMemo, useState } from 'react';
import {
  Button, Card, Input, Pagination, Popconfirm,
  Result,
  Tag,
} from 'antd';
import {
  DeleteOutlined, EditOutlined,
} from '@ant-design/icons';
import { currentOrg } from '@/utils';
import EditTeacher from './components/EditTeacher';
import style from './index.module.less';

/**
* 教师管理页面
*/
const Teacher = () => {
  const {
    data, refetch, loading, page,
  } = useTeachers();
  const [curId, setCurId] = useState('');
  const [show, setShow] = useState(false);
  const onClickAddHandler = (id?: string) => {
    if (id) {
      setCurId(id);
    } else {
      setCurId('');
    }
    setShow(true);
  };
  // 门店切换，重新渲染
  const res = currentOrg();
  useMemo(() => {
    refetch();
  }, [res]);
  // 分页
  const onPageChangeHandler = (pageNum: number, pageSize: number) => {
    refetch({
      pageNum,
      pageSize,
    });
  };
  // 新增
  const closeAndRefetchHandler = () => {
    console.log('EditTeacher', show, EditTeacher);
    setShow(false);
    refetch();
  };
  useEffect(() => {
    console.log('show', show);
  }, [show]);
  // 删除
  const [delHandler, delLoading] = useDeleteTeacher();
  const onClickDelHandler = (id: string) => {
    delHandler(id, closeAndRefetchHandler);
  };
  // 检索
  const onSearchHandler = (name:string) => {
    refetch({
      name,
    });
  };

  return (
    <PageContainer header={{ title: '教师管理' }}>
      <Card>
        <div className={style.cardBox}>
          <Input.Search
            allowClear
            enterButton
            className={style.iptSearch}
            onSearch={onSearchHandler}
            placeholder="请输入教师名字进行搜索"
          />
          <Button type="primary" className={style.btnAdd} onClick={() => onClickAddHandler()}>新增</Button>
        </div>

      </Card>
      <ProCard loading={loading}>
        {data?.length === 0 && <Result title="暂无教师数据" />}
        <div style={{ display: 'flex', flexWrap: 'wrap', width: '100%' }}>
          {
            data?.map((item) => (
              <ProCard
                layout="center"
                bordered
                key={item.id}
                className={style.card}
                actions={[
                  <div>
                    <a onClick={() => onClickAddHandler(item.id)}>
                      <EditOutlined
                        key="edit"
                        title="编辑"
                      />
                      &nbsp;&nbsp;编辑
                    </a>
                  </div>,
                  <div>
                    <a>
                      <Popconfirm
                        title="提醒"
                        description="确认删除吗？"
                        onConfirm={() => onClickDelHandler(item.id)}
                        okButtonProps={{ loading: delLoading }}
                      >
                        <DeleteOutlined key="del" />
                        &nbsp;&nbsp;删除
                      </Popconfirm>
                    </a>
                  </div>,

                ]}
              >
                <div
                  className={style.avatar}
                  style={{ backgroundImage: `url(${item.photoUrl})` }}
                />
                <div className={style.content}>
                  <div className={style.name}>{ item.name }</div>
                  <div style={{ display: 'flex', flexWrap: 'wrap' }}>
                    {item.tags.split(',').map((it: string) => (
                      <Tag
                        key={it}
                        color="green"
                      >
                        {it}
                      </Tag>
                    ))}
                  </div>
                  <div className={style.education}>{ item.education }</div>
                  <div className={style.seniority}>{ item.seniority }</div>
                </div>
              </ProCard>

            ))
          }
        </div>
        <div className={style.page}>
          <Pagination
            pageSize={page?.pageSize}
            current={page?.pageNum}
            total={page?.total}
            onChange={onPageChangeHandler}
          />
        </div>
      </ProCard>

      {/* 编辑教师抽屉 */}
      {show && (<EditTeacher id={curId} onClose={closeAndRefetchHandler} />) }
    </PageContainer>
  );
};

export default Teacher;
